import React from 'react'
import { List, Radio, InputItem, WhiteSpace, Button, Toast, WingBlank } from 'antd-mobile'
import { createForm } from 'rc-form'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'

import Logo from '@/components/Logo'
import { register, userReset } from '@/redux/User.redux'
import Alert from '@/components/Alert'

const RadioItem = Radio.RadioItem

@connect(
    state => state.user,
    { register, userReset }
)
class Register extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            type: 'genius',
        }
        this.login = this.login.bind(this)
        this.handlerChange = this.handlerChange.bind(this)
        this.register = this.register.bind(this)
    }

    login(){
        this.props.userReset()
        this.props.history.push('/login')
    }

    handlerChange(key, val){
        this.setState({
            [key]: val
        })
    }

    register(){
        const { form } = this.props
        form.validateFields({force: true}, (err, fields) => {
            if(err)
                return
            const { type } = this.state
            this.props.register({ type, ...fields })
        })
    }

    validate = (rule, value, callback) => {
        if(value.indexOf(' ') !== -1)
            return callback(new Error('不能含有空格'))
        if(rule.field === 'repeatPassword'){
            const { getFieldValue } = this.props.form
            if(value !== getFieldValue('password'))
                return callback(new Error('两次密码输入不一致'))
        }
        callback()
    }

    render(){
        const { form: {getFieldError, getFieldProps, getFieldDecorator}, code, message, redirect } = this.props
        //双重否定是为了兼容处理undefined的情况
        return (
            <WingBlank size="md">
                <Logo/>
                { code === 1 && <Alert message={message} type="error" /> }
                { code === 0 && <Redirect to={redirect} /> }
                <List>
                    <InputItem
                        {...getFieldProps('username', {
                            initialValue: '',
                            rules: [
                                { required: true, message: '用户名不能为空' },
                                { validator: this.validate },
                            ],
                        })}
                        clear={true}
                        error={ !!getFieldError('username') }
                        onErrorClick={() => {
                            Toast.fail(getFieldError('username')[0], 1.2)
                        }}
                    >用户名</InputItem>
                    {
                        getFieldDecorator('password',{
                            initialValue: '',
                            rules: [
                                { required: true, message: '密码不能为空' },
                                { validator: this.validate },
                            ],
                        })(
                            <InputItem
                                type='password'
                                clear={true}
                                error={ !!getFieldError('password') }
                                onErrorClick={() => {
                                    Toast.fail(getFieldError('password')[0], 1.2)
                                }}
                            >密码</InputItem>
                        )
                    }
                    {
                        getFieldDecorator('repeatPassword',{
                            initialValue: '',
                            rules: [
                                { required: true, message: '密码不能为空' },
                                { validator: this.validate },
                            ],
                        })(
                            <InputItem
                                type='password'
                                clear={true}
                                error={ !!getFieldError('repeatPassword') }
                                onErrorClick={() => {
                                    Toast.fail(getFieldError('repeatPassword')[0], 1.2)
                                }}
                            >确认密码</InputItem>
                        )
                    }
                    <RadioItem
                        checked={this.state.type === 'genius'}
                        onChange={ val => this.handlerChange('type', 'genius') }
                    >
                        牛人
                    </RadioItem>
                    <RadioItem
                        checked={this.state.type === 'boss'}
                        onChange={ val => this.handlerChange('type', 'boss') }
                    >
                        BOSS
                    </RadioItem>
                </List>
                <WhiteSpace/>
                <Button type="primary" onClick={this.register}>注册</Button>
                <WhiteSpace/>
                <Button type="primary" onClick={this.login}>登录</Button>
            </WingBlank>
        )
    }
}

export default createForm()(Register)